<template>
	<view class="content-header-f">
		<view class="flex-column">
			<uni-search-bar class="seach" :radius="36" @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input" clearButton="none" cancelButton="none"
							@cancel="cancel" @clear="clear">
						</uni-search-bar>
						<view v-if="show_goods==false" class="bodys">
							<view class="bodys-top"></view>
							<view class="flex-column">
								<view class="flex-row">
									<image class="bodys-heat-img" src="../../static/index/huo.png" mode="scaleToFill"></image>
									<view class="bodys-heat-txt">热门推荐</view>
								</view>
								<view class="flex-row flex-wrap flex-content-start bodys-tab-top">
									<view v-for="tab in recommendList">
										<view class="bodys-tab-txt" @tap="chax(tab)">{{tab}}</view>
									</view>
								</view>
							</view>
							<view class="bodys-top"></view>
							<view class="flex-column">
								<view class="bodys-his">历史搜索</view>
								<view class="flex-row flex-wrap flex-content-start bodys-tab-top">
									<view v-for="tab in recommendList">
										<view class="bodys-tab-txt" @tap="chax(tab)">{{tab}}</view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="show_goods==true">
							<view v-if="list.length==0">
								<image class="not-img" src="../../static/index/not-goods.png" mode="scaleToFill"></image>
								<view class="not-txt">抱歉，暂无搜索结果</view>
							</view>
							<view v-if="list.length>0" class="goodslist">
								<scroll-view :scroll-y="true" class="goods-list">
									<view class="flex-row flex-content-between flex-wrap good-top">
										<view v-for="goods in list" class="ones flex-column" @tap="gotoInfo(goods.id)">
											<image class="goods-img" :src="$utils.cdnImg(goods.image)" mode="widthFix"></image>
											<view class="goods-txt-1">{{goods.title}}</view>
											<view class="flex-row flex-content-between flex-item-center">
												<view class="flex-row goods-txt-2">
													<view>￥</view>
													<view>{{goods.price}}</view>
													<view>￥{{goods.original_price}}</view>
												</view>
												<image @tap.stop="attrs(goods.goodsitem,goods)" class="goods-gwc" src="../../static/index/gwc.png" mode="scaleToFill"></image>
											</view>
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
		</view>
		<attr :attrList="attrList" ref="gouwuces" @confirm="confirm"></attr>
	</view>
</template>

<script>
	import attr from "@/components/attr.vue"
	export default{
		components:{
			attr
		},
		data(){
			return{
				show_goods:false,
				searchValue:"",
				attrList:[],
				goodsInfo:null,
				recommendList:[
					"猪蹄",
					"五花肉",
					"政策"
				],//推荐词
				page:1,
				list:[
					// "",
					// "",
					// "",
					// "",
					// "",
					// "",
					// "",
					// "",
					// "",
					// "",
					// "",
				],//商品列表
			}
		},
		onLoad() {
			// this.getGoodsList(true);
		},
		methods:{
			//添加购物车
			confirm(e){
				console.log(e);
				let that = this;
				let data = {
					cart:[
						{
							mumerchant_goods_id:this.goodsInfo.id,
							mumerchant_goods_item_id:e.data.id,
							num:e.num
						}
					],
					type:'add'
				}
				this.$api.changeShopCart(data).then(res=>{
					that.$store.dispatch("getCartList")
					that.$utils.showMessage("添加到购物车成功")
				})
			},
			//打开购买选择框
			attrs(list,goodsInfo){
				this.attrList = list;
				this.goodsInfo = goodsInfo;
				this.$refs.gouwuces.open()
			},
			//跳转到详情
			gotoInfo(id){
				uni.navigateTo({
					url:'/pages/goods/goods_info?id='+id
				})
			},
			//获取商品详情
			getGoodsList(loading){
				if(loading==undefined){
					loading = false
				}
				// console.log("触底");
				let that = this;
				let page = this.page;
				if(page==0){
					return
				}
				if(this.searchValue==""){
					return
				}
				let data = {
					page:page,
					// is_sell:1,
					goods_type:1,
					seach_txt:this.searchValue,
					limit:30,
				}
				this.$api.getGoodsList(data,loading).then(res=>{
					that.show_goods = true;
					console.log(res);
					if(res.data&&res.data.length>0){
						that.list.push(...res.data)
						that.page+=1
					}else{
						that.page = 0
					}
				})
			},
			input(e){
				this.searchValue = e;
				this.apge = 1;
				let that = this;
				if(this.searchValue){
					this.$utils.delayedHand(function(){
						that.getGoodsList(true);
					})
				}else{
					this.show_goods = false;
				}
				
			},
			chax(e){
				this.searchValue = e;
				this.apge = 1;
				let that = this;
				if(this.searchValue){
					this.$utils.delayedHand(function(){
						that.getGoodsList(true);
					})
				}else{
					this.show_goods = false;
				}
			}
		}
	}
</script>

<style lang="scss">
	.good-top{
		padding-bottom: 30rpx;
	}
	.goods-txt-2{
		margin-top: 23rpx;
		>view:nth-child(1){
			font-size: 22rpx;
			font-family: DIN-Regular, DIN;
			font-weight: 400;
			color: #FF5000;
			margin-top: 10rpx;
		}
		>view:nth-child(2){
			font-size: 34rpx;
			font-family: DIN-Bold, DIN;
			font-weight: bold;
			color: #FF5000;
		}
		>view:nth-child(3){
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-left: 15rpx;
			text-decoration: line-through;
		}
	}
	.goods-gwc{
		width: 44rpx;
		height: 44rpx;
	}
	.goods-txt-1{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-top: 20rpx;
	}
	.goods-img{
		width: 335rpx;
	}
	.ones{
		width: 335rpx;
		height: 456rpx;
		// background-color: #333333;
		margin-top: 46rpx;
	}
	.goods-list{
		width: 690rpx;
		height: calc(100vh - 100rpx - 100rpx);
		// background-color: #333333;
	}
	.goodslist{
		width: 690rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	.not-txt{
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		text-align: center;
		margin-top: 30rpx;
	}
	.not-img{
		width: 337rpx;
		height: 228rpx;
		margin-top: 230rpx;
		margin-left: 215rpx;
	}
	.bodys-his{
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.bodys-tab-txt{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		margin-right: 30rpx;
		background: #ECECEC;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		opacity: 1;
		padding: 11rpx 44rpx 11rpx 44rpx;
		margin-top: 30rpx;
	}
	.bodys-tab-top{
		margin-top: 30rpx;
		width: 750rpx;
	}
	.bodys-heat-txt{
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-left: 16rpx;
	}
	.bodys-heat-img{
		width: 23rpx;
		height: 29rpx;
	}
	.bodys-top{
		width: 690rpx;
		height: 40rpx;
	}
	.bodys{
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	.seach{
		width: 690rpx;
		margin-left: 10rpx;
		// border-radius: 36rpx;
	}
</style>